<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技能交换 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        
        .section-title {
            position: relative;
            display: inline-block;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -5px;
            width: 60px;
            height: 3px;
            background-color: #10b981;
        }
        
        .skill-card {
            transition: all 0.3s ease;
            height: 100%;
        }
        
        .skill-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }
        
        .stats {
            font-size: 0.875rem;
        }
        
        .stats i {
            width: 16px;
            text-align: center;
        }
        
        .skill-tag {
            font-size: 0.75rem;
            padding: 0.2rem 0.5rem;
        }
        
        .image-container {
            position: relative;
            overflow: hidden;
        }
        
        .image-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 12px;
        }
        
        .no-image-placeholder {
            background-color: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            min-height: 180px;
        }
        
        .masonry-grid {
            column-count: 1;
            column-gap: 1rem;
        }
        
        @media (min-width: 768px) {
            .masonry-grid {
                column-count: 2;
            }
        }
        
        @media (min-width: 992px) {
            .masonry-grid {
                column-count: 3;
            }
        }
        
        .masonry-item {
            break-inside: avoid;
            margin-bottom: 1rem;
        }
        
        .list-item {
            transition: background-color 0.2s ease;
        }
        
        .list-item:hover {
            background-color: #f1f5f9;
        }
        
        .exchange-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1;
        }
        
        .skill-category {
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .skill-category.active {
            background-color: #10b981;
            color: white;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-success sticky-top">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center gap-2" href="#">
                <i class="fas fa-exchange-alt"></i>
                <span>技能交换平台</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">技能交换</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">发现达人</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">我的交换</a>
                    </li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <div class="search-container d-none d-md-block">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" placeholder="搜索技能...">
                            <button class="btn btn-outline-light" type="button">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                    <button class="btn btn-outline-light">
                        <i class="fas fa-bell"></i>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle rounded-circle" type="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" width="36" height="36" class="rounded-circle">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人中心</a></li>
                            <li><a class="dropdown-item" href="#">我的技能</a></li>
                            <li><a class="dropdown-item" href="#">消息</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="text-center mb-8">
            <h1 class="section-title">技能交换推荐</h1>
            <p class="text-muted mt-3">发现有趣的技能，分享你的专长，实现互利共赢</p>
        </div>

        <!-- 技能分类标签 -->
        <div class="d-flex flex-wrap justify-content-center gap-2 mb-8">
            <button class="btn skill-category active">全部技能</button>
            <button class="btn skill-category btn-outline-success">语言学习</button>
            <button class="btn skill-category btn-outline-success">艺术创作</button>
            <button class="btn skill-category btn-outline-success">厨艺美食</button>
            <button class="btn skill-category btn-outline-success">运动健身</button>
            <button class="btn skill-category btn-outline-success">数码科技</button>
            <button class="btn skill-category btn-outline-success">手工制作</button>
            <button class="btn skill-category btn-outline-success">职场技能</button>
        </div>

        <!-- 1. 网格布局 - 卡片式 -->
        <section class="mb-12">
            <h2 class="section-title mb-4">热门技能交换</h2>
            <div class="row gap-4">
                <!-- 技能卡片 1 - 单张图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card skill-card">
                        <div class="image-container">
                            <img src="https://picsum.photos/id/20/600/400" alt="英语口语练习展示" class="card-img-top w-100" style="height: 200px; object-fit: cover;">
                            <span class="image-count">1</span>
                            <span class="badge bg-success exchange-badge">热门</span>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="card-title mb-1">英语口语交换</h5>
                                    <p class="text-muted mb-0">我教你中文，你教我英语</p>
                                </div>
                                <span class="badge skill-tag bg-primary">语言</span>
                            </div>
                            
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1012/40/40" alt="技能提供者头像" class="rounded-circle" width="32" height="32">
                                <span class="text-sm">陈明</span>
                            </div>
                            
                            <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                英语专业毕业，现从事翻译工作，希望找到能进行日常口语练习的伙伴，我可以教你中文。
                            </p>
                            
                            <div class="d-flex justify-content-between stats text-muted border-top pt-2">
                                <div><i class="fas fa-eye me-1"></i> 2.5k</div>
                                <div><i class="fas fa-comment me-1"></i> 87</div>
                                <div><i class="fas fa-bookmark me-1"></i> 342</div>
                                <div><i class="fas fa-heart me-1"></i> 512</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 技能卡片 2 - 多张图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card skill-card">
                        <div class="image-container">
                            <div class="row g-1">
                                <div class="col-6">
                                    <img src="https://picsum.photos/id/292/300/300" alt="烘焙作品1" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="col-6">
                                    <div class="row g-1 h-100">
                                        <div class="col-12">
                                            <img src="https://picsum.photos/id/431/300/150" alt="烘焙作品2" class="w-100 h-100 object-fit-cover">
                                        </div>
                                        <div class="col-12">
                                            <img src="https://picsum.photos/id/493/300/150" alt="烘焙作品3" class="w-100 h-100 object-fit-cover">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <span class="image-count">6+</span>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="card-title mb-1">烘焙技能交换</h5>
                                    <p class="text-muted mb-0">我教烘焙，想学摄影</p>
                                </div>
                                <span class="badge skill-tag bg-warning">厨艺</span>
                            </div>
                            
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1027/40/40" alt="技能提供者头像" class="rounded-circle" width="32" height="32">
                                <span class="text-sm">林小厨</span>
                            </div>
                            
                            <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                专业烘焙师，擅长蛋糕和面包制作，希望学习基础摄影技巧，用于展示我的烘焙作品。
                            </p>
                            
                            <div class="d-flex justify-content-between stats text-muted border-top pt-2">
                                <div><i class="fas fa-eye me-1"></i> 1.8k</div>
                                <div><i class="fas fa-comment me-1"></i> 124</div>
                                <div><i class="fas fa-bookmark me-1"></i> 256</div>
                                <div><i class="fas fa-heart me-1"></i> 432</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 技能卡片 3 - 无图片 -->
                <div class="col-md-6 col-lg-4">
                    <div class="card skill-card">
                        <div class="image-container no-image-placeholder">
                            <i class="fas fa-code fa-3x"></i>
                        </div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="card-title mb-1">编程技能交换</h5>
                                    <p class="text-muted mb-0">我教编程，想学吉他</p>
                                </div>
                                <span class="badge skill-tag bg-info">技术</span>
                            </div>
                            
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1074/40/40" alt="技能提供者头像" class="rounded-circle" width="32" height="32">
                                <span class="text-sm">王程序</span>
                            </div>
                            
                            <p class="card-text text-sm text-muted mb-3 line-clamp-2">
                                资深程序员，精通Python和JavaScript，希望学习吉他入门技巧，有音乐基础者优先。
                            </p>
                            
                            <div class="d-flex justify-content-between stats text-muted border-top pt-2">
                                <div><i class="fas fa-eye me-1"></i> 1.2k</div>
                                <div><i class="fas fa-comment me-1"></i> 67</div>
                                <div><i class="fas fa-bookmark me-1"></i> 189</div>
                                <div><i class="fas fa-heart me-1"></i> 321</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 2. 瀑布流布局 -->
        <section class="mb-12">
            <h2 class="section-title mb-4">推荐技能交换</h2>
            <div class="masonry-grid">
                <!-- 瀑布流项目 1 -->
                <div class="masonry-item">
                    <div class="card skill-card">
                        <div class="image-container">
                            <img src="https://picsum.photos/id/1059/600/800" alt="瑜伽教学展示" class="card-img-top w-100" style="object-fit: cover;">
                            <span class="image-count">3</span>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2">瑜伽教学交换</h5>
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1062/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                <span class="text-sm">刘瑜伽</span>
                            </div>
                            <p class="card-text text-sm text-muted mb-3">瑜伽教练，可教授基础和中级课程，希望学习绘画基础。</p>
                            <div class="d-flex justify-content-between stats text-muted">
                                <div><i class="fas fa-eye me-1"></i> 956</div>
                                <div><i class="fas fa-heart me-1"></i> 243</div>
                                <button class="btn btn-sm btn-success">申请交换</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流项目 2 -->
                <div class="masonry-item">
                    <div class="card skill-card">
                        <div class="image-container">
                            <div class="row g-1">
                                <div class="col-12">
                                    <img src="https://picsum.photos/id/1082/600/300" alt="摄影作品1" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="col-6">
                                    <img src="https://picsum.photos/id/1083/300/300" alt="摄影作品2" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="col-6">
                                    <img src="https://picsum.photos/id/1084/300/300" alt="摄影作品3" class="w-100 h-100 object-fit-cover">
                                </div>
                            </div>
                            <span class="image-count">8</span>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2">摄影技巧交换</h5>
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1066/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                <span class="text-sm">张摄影</span>
                            </div>
                            <p class="card-text text-sm text-muted mb-3">专业摄影师，擅长人像和风景摄影，想学习视频剪辑技巧。</p>
                            <div class="d-flex justify-content-between stats text-muted">
                                <div><i class="fas fa-eye me-1"></i> 1.5k</div>
                                <div><i class="fas fa-heart me-1"></i> 387</div>
                                <button class="btn btn-sm btn-success">申请交换</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流项目 3 - 无图片 -->
                <div class="masonry-item">
                    <div class="card skill-card">
                        <div class="image-container no-image-placeholder">
                            <i class="fas fa-language fa-3x"></i>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2">日语学习交换</h5>
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1074/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                <span class="text-sm">李日语</span>
                            </div>
                            <p class="card-text text-sm text-muted mb-3">日本留学5年，日语N1水平，希望学习韩语基础，可交换日语学习。</p>
                            <div class="d-flex justify-content-between stats text-muted">
                                <div><i class="fas fa-eye me-1"></i> 876</div>
                                <div><i class="fas fa-heart me-1"></i> 215</div>
                                <button class="btn btn-sm btn-success">申请交换</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流项目 4 -->
                <div class="masonry-item">
                    <div class="card skill-card">
                        <div class="image-container">
                            <img src="https://picsum.photos/id/119/600/400" alt="手工皮具展示" class="card-img-top w-100" style="object-fit: cover;">
                            <span class="image-count">4</span>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2">手工皮具制作交换</h5>
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1077/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                <span class="text-sm">赵手工</span>
                            </div>
                            <p class="card-text text-sm text-muted mb-3">业余手工皮具爱好者，有3年经验，希望学习木工基础技能。</p>
                            <div class="d-flex justify-content-between stats text-muted">
                                <div><i class="fas fa-eye me-1"></i> 754</div>
                                <div><i class="fas fa-heart me-1"></i> 189</div>
                                <button class="btn btn-sm btn-success">申请交换</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 瀑布流项目 5 -->
                <div class="masonry-item">
                    <div class="card skill-card">
                        <div class="image-container">
                            <div class="row g-1">
                                <div class="col-6">
                                    <img src="https://picsum.photos/id/225/300/600" alt="钢琴教学1" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="col-6">
                                    <img src="https://picsum.photos/id/163/300/600" alt="钢琴教学2" class="w-100 h-100 object-fit-cover">
                                </div>
                            </div>
                            <span class="image-count">5</span>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title mb-2">钢琴教学交换</h5>
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <img src="https://picsum.photos/id/1084/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                <span class="text-sm">孙钢琴</span>
                            </div>
                            <p class="card-text text-sm text-muted mb-3">钢琴八级，可教初学者，希望学习街舞基础或围棋入门。</p>
                            <div class="d-flex justify-content-between stats text-muted">
                                <div><i class="fas fa-eye me-1"></i> 1.1k</div>
                                <div><i class="fas fa-heart me-1"></i> 276</div>
                                <button class="btn btn-sm btn-success">申请交换</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 3. 列表布局 -->
        <section class="mb-12">
            <h2 class="section-title mb-4">最新技能交换</h2>
            <div class="card">
                <div class="list-group list-group-flush">
                    <!-- 列表项 1 -->
                    <div class="list-group-item list-item p-4">
                        <div class="d-flex flex-column md:flex-row gap-4">
                            <div class="md:w-1/4">
                                <div class="image-container rounded overflow-hidden">
                                    <img src="https://picsum.photos/id/365/400/300" alt="厨艺展示" class="w-100 h-100 object-fit-cover">
                                    <span class="image-count">2</span>
                                </div>
                            </div>
                            <div class="md:w-3/4">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5 class="mb-1">中餐厨艺交换</h5>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <img src="https://picsum.photos/id/1086/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                            <span class="text-sm">陈大厨</span>
                                            <span class="badge skill-tag bg-success">新发布</span>
                                            <span class="badge skill-tag bg-warning">厨艺</span>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-success">申请交换</button>
                                </div>
                                <p class="text-sm text-muted mb-3">
                                    中餐厨师，擅长川菜和粤菜，可教授家常菜和一些特色菜的制作，希望学习西餐基础或咖啡制作。
                                </p>
                                <div class="d-flex gap-4 stats text-muted">
                                    <div><i class="fas fa-eye me-1"></i> 342</div>
                                    <div><i class="fas fa-comment me-1"></i> 23</div>
                                    <div><i class="fas fa-bookmark me-1"></i> 56</div>
                                    <div><i class="fas fa-heart me-1"></i> 89</div>
                                    <div><i class="fas fa-clock me-1"></i> 2小时前</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 列表项 2 - 无图片 -->
                    <div class="list-group-item list-item p-4">
                        <div class="d-flex flex-column md:flex-row gap-4">
                            <div class="md:w-1/4">
                                <div class="no-image-placeholder rounded">
                                    <i class="fas fa-paint-brush fa-3x"></i>
                                </div>
                            </div>
                            <div class="md:w-3/4">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5 class="mb-1">绘画技能交换</h5>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <img src="https://picsum.photos/id/1087/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                            <span class="text-sm">吴画家</span>
                                            <span class="badge skill-tag bg-success">新发布</span>
                                            <span class="badge skill-tag bg-primary">艺术</span>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-success">申请交换</button>
                                </div>
                                <p class="text-sm text-muted mb-3">
                                    美术专业毕业，擅长素描和水彩画，可教授绘画基础，希望学习网页设计或视频剪辑技能。
                                </p>
                                <div class="d-flex gap-4 stats text-muted">
                                    <div><i class="fas fa-eye me-1"></i> 287</div>
                                    <div><i class="fas fa-comment me-1"></i> 18</div>
                                    <div><i class="fas fa-bookmark me-1"></i> 45</div>
                                    <div><i class="fas fa-heart me-1"></i> 76</div>
                                    <div><i class="fas fa-clock me-1"></i> 5小时前</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 列表项 3 - 多张图片 -->
                    <div class="list-group-item list-item p-4">
                        <div class="d-flex flex-column md:flex-row gap-4">
                            <div class="md:w-1/4">
                                <div class="image-container rounded overflow-hidden">
                                    <div class="row g-1 h-100">
                                        <div class="col-6 h-50">
                                            <img src="https://picsum.photos/id/176/200/200" alt="健身指导1" class="w-100 h-100 object-fit-cover">
                                        </div>
                                        <div class="col-6 h-50">
                                            <img src="https://picsum.photos/id/177/200/200" alt="健身指导2" class="w-100 h-100 object-fit-cover">
                                        </div>
                                        <div class="col-12 h-50">
                                            <img src="https://picsum.photos/id/178/400/200" alt="健身指导3" class="w-100 h-100 object-fit-cover">
                                        </div>
                                    </div>
                                    <span class="image-count">4+</span>
                                </div>
                            </div>
                            <div class="md:w-3/4">
                                <div class="d-flex justify-content-between align-items-start">
                                    <div>
                                        <h5 class="mb-1">健身指导交换</h5>
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <img src="https://picsum.photos/id/1091/40/40" alt="技能提供者头像" class="rounded-circle" width="28" height="28">
                                            <span class="text-sm">郑教练</span>
                                            <span class="badge skill-tag bg-success">新发布</span>
                                            <span class="badge skill-tag bg-danger">运动</span>
                                        </div>
                                    </div>
                                    <button class="btn btn-sm btn-success">申请交换</button>
                                </div>
                                <p class="text-sm text-muted mb-3">
                                    健身教练，擅长力量训练和减脂塑形指导，可提供一对一训练计划，希望学习营养师知识或推拿按摩。
                                </p>
                                <div class="d-flex gap-4 stats text-muted">
                                    <div><i class="fas fa-eye me-1"></i> 412</div>
                                    <div><i class="fas fa-comment me-1"></i> 31</div>
                                    <div><i class="fas fa-bookmark me-1"></i> 67</div>
                                    <div><i class="fas fa-heart me-1"></i> 98</div>
                                    <div><i class="fas fa-clock me-1"></i> 8小时前</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 4. 大型特色技能展示 -->
        <section>
            <h2 class="section-title mb-4">特色技能交换</h2>
            <div class="card skill-card overflow-hidden">
                <div class="row">
                    <div class="col-md-5">
                        <div class="image-container h-100">
                            <img src="https://picsum.photos/id/1060/800/1000" alt="书法教学展示" class="w-100 h-100 object-fit-cover">
                            <span class="image-count">12</span>
                            <span class="badge bg-success exchange-badge">特色</span>
                        </div>
                    </div>
                    <div class="col-md-7 p-5">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div>
                                <h3 class="mb-2">书法教学交换</h3>
                                <div class="d-flex align-items-center gap-3">
                                    <img src="https://picsum.photos/id/1074/60/60" alt="技能提供者头像" class="rounded-circle" width="48" height="48">
                                    <div>
                                        <div class="font-medium">欧阳老师</div>
                                        <div class="text-sm text-muted">书法协会会员 | 15年经验</div>
                                    </div>
                                    <span class="badge skill-tag bg-primary">艺术</span>
                                </div>
                            </div>
                            <button class="btn btn-success">立即申请交换</button>
                        </div>
                        
                        <p class="mb-5">
                            中国书法协会会员，擅长楷书、行书和草书，有15年书法教学经验。可教授从基础笔画到作品创作的全套课程，适合各年龄段学习者。希望学习新媒体运营或短视频制作技能，用于推广传统文化。
                        </p>
                        
                        <div class="row mb-5">
                            <div class="col-3 text-center">
                                <div class="fs-4 fw-bold">124</div>
                                <div class="text-sm text-muted">成功交换</div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="fs-4 fw-bold">4.9</div>
                                <div class="text-sm text-muted">平均评分</div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="fs-4 fw-bold">876</div>
                                <div class="text-sm text-muted">学习人次</div>
                            </div>
                            <div class="col-3 text-center">
                                <div class="fs-4 fw-bold">3</div>
                                <div class="text-sm text-muted">教学证书</div>
                            </div>
                        </div>
                        
                        <div class="d-flex gap-3 stats text-muted">
                            <div class="fs-5"><i class="fas fa-eye me-1"></i> 5.2k</div>
                            <div class="fs-5"><i class="fas fa-comment me-1"></i> 324</div>
                            <div class="fs-5"><i class="fas fa-bookmark me-1"></i> 1.8k</div>
                            <div class="fs-5"><i class="fas fa-heart me-1"></i> 2.5k</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-6">
                    <h5 class="mb-3">技能交换平台</h5>
                    <p class="text-muted">分享技能，结交朋友，共同成长</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="#" class="text-white"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-wechat fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-instagram fa-lg"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-twitter fa-lg"></i></a>
                    </div>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">首页</a></li>
                        <li><a href="#" class="text-muted">技能交换</a></li>
                        <li><a href="#" class="text-muted">发现达人</a></li>
                        <li><a href="#" class="text-muted">发布技能</a></li>
                    </ul>
                </div>
                <div class="col-md-2 mb-6">
                    <h5 class="mb-3">帮助中心</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted">使用指南</a></li>
                        <li><a href="#" class="text-muted">常见问题</a></li>
                        <li><a href="#" class="text-muted">安全提示</a></li>
                        <li><a href="#" class="text-muted">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">发布新技能</h5>
                    <p class="text-muted mb-3">分享你的专长，找到合适的技能交换伙伴</p>
                    <button class="btn btn-success w-100">
                        <i class="fas fa-plus me-1"></i> 发布技能
                    </button>
                </div>
            </div>
            <div class="border-top border-gray-700 mt-6 pt-6 text-center text-muted">
                <p>&copy; 2023 技能交换平台 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 技能分类标签切换
        document.querySelectorAll('.skill-category').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.skill-category').forEach(btn => {
                    btn.classList.remove('active', 'btn-success');
                    btn.classList.add('btn-outline-success');
                });
                
                this.classList.add('active', 'btn-success');
                this.classList.remove('btn-outline-success');
            });
        });
        
        // 申请交换按钮交互
        document.querySelectorAll('button:contains("申请交换")').forEach(button => {
            button.addEventListener('click', function() {
                if (this.textContent.includes('申请交换')) {
                    this.textContent = '已申请';
                    this.classList.remove('btn-success');
                    this.classList.add('btn-secondary');
                } else {
                    this.textContent = '申请交换';
                    this.classList.remove('btn-secondary');
                    this.classList.add('btn-success');
                }
            });
        });
        
        // 图片懒加载初始化
        document.addEventListener("DOMContentLoaded", function() {
            const lazyImages = document.querySelectorAll("img");
            
            if ("IntersectionObserver" in window) {
                const imageObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const image = entry.target;
                            image.classList.add('opacity-100');
                            image.classList.remove('opacity-0');
                            imageObserver.unobserve(image);
                        }
                    });
                });
                
                lazyImages.forEach(image => {
                    imageObserver.observe(image);
                    image.classList.add('transition-opacity', 'duration-500', 'opacity-0');
                });
            }
        });
    </script>
</body>
</html>
    
